import { customFormat } from '@/utils';
import { useIntl } from '@umijs/max';
import {
    Col,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Rate,
    Row,
    Space,
    UploadFile,
    message,
} from 'antd';
import { ReactElement, useEffect, useState } from 'react';
import { normCity, normCityGetVal } from '.';
import FormCascader from './FormCascader';
import FormCheckBox from './FormCheckBox';
import FormFiles from './FormFiles';
import FormImages from './FormImages';
import FormItem from './FormItem';
import FormRadio from './FormRadio';
import FormSelect from './FormSelect';
import FormVideos from './FormVideos';
import FromCity from './FromCity';
type IParams = {
    formItems?: Array<IBuildForm.Item> | undefined;
    value?: IBuildForm.IDefault;
    children?: ReactElement;
    onFinish?: (val: IBuildForm.IDefault) => void;
};

const BuildForm: React.FC<IParams> = (props) => {
    const [form] = Form.useForm();
    const { TextArea } = Input;
    const intl = useIntl();
    const [formData, setformData] = useState<IBuildForm.IDefault | undefined>();
    const [formItems, setformItems] = useState<Array<IBuildForm.Item>>([]);
    function submitForm(val: IBuildForm.IDefault) {
        if (props.onFinish) {
            props.onFinish(val);
        }
    }
    useEffect(() => {
        if (props.value && props.formItems) {
            setformData(props.value);
            setformItems(props.formItems);
        }
    }, [props]);
    useEffect(() => {
        // getActionSheetList({
        //     type: that.item.value.type,
        //     pid: that.item.value.pid,
        // })
    }, []);
    function NumberAfter(item: IBuildForm.Item) {
        if (!formData) return;
        let str = '';
        // 如果是期望单价 后面追加  价格单位 / 数量单位
        if (item.key === 'desire_price') {
            str += formData['price_unit'];
            if (formData['number_unit']) {
                str += ' / ' + formData['number_unit'];
            }
        }
        // 如果是数量后面跟数量单位
        if (item.key === 'num') {
            str += formData['number_unit'];
        }
        // 如果是参与竞拍输入的价格(单价) 后面追加  价格单位 / 数量单位
        if (item.key === 'price') {
            str += formData['price_unit'];
            if (formData['number_unit']) {
                str += ' / ' + formData['number_unit'];
            }
        }
        return str ? str : null;
    }
    const normFile = (e: any): UploadFile<any> | Array<UploadFile<any>> => {
        if (e?.file?.response?.data === '') {
            const fileId = e?.file?.uid;
            message.error(e?.file?.response.msg);
            return e?.fileList.filter((item) => item.uid !== fileId);
        }
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };

    return (
        <>
            <Form
                form={form}
                layout="vertical"
                initialValues={{ remember: true }}
                size="large"
                autoComplete="off"
                // labelCol={{ span: 6 }}
                // wrapperCol={{ span: 18 }}
                onFinish={submitForm}
            >
                <Row gutter={30}>
                    {formData &&
                        formItems.map(
                            (item: IBuildForm.Item, index: number) => (
                                <Col key={index} span={6}>
                                    {item.type === 'disabled' && (
                                        <FormItem item={item}>
                                            <Input
                                                placeholder={customFormat(
                                                    item.placeholder,
                                                    intl,
                                                )}
                                                disabled
                                            />
                                        </FormItem>
                                    )}
                                    {item.type === 'text' && (
                                        <FormItem item={item}>
                                            <Input
                                                placeholder={customFormat(
                                                    item.placeholder,
                                                    intl,
                                                )}
                                            />
                                        </FormItem>
                                    )}
                                    {(item.type === 'number' ||
                                        item.type === 'digit') && (
                                        <FormItem item={item}>
                                            <InputNumber
                                                style={{ width: '100%' }}
                                                addonAfter={NumberAfter(item)}
                                                controls={false}
                                                placeholder={customFormat(
                                                    item.placeholder,
                                                    intl,
                                                )}
                                            />
                                        </FormItem>
                                    )}
                                    {item.type === 'actionSheet' && (
                                        <FormItem item={item}>
                                            <FormCascader
                                                placeholder={customFormat(
                                                    item.placeholder,
                                                    intl,
                                                )}
                                                item={item}
                                            ></FormCascader>
                                        </FormItem>
                                    )}
                                    {item.type === 'checkbox' && (
                                        <FormItem
                                            item={item}
                                            valuePropName="checked"
                                        >
                                            <FormCheckBox
                                                item={item}
                                            ></FormCheckBox>
                                        </FormItem>
                                    )}
                                    {item.type === 'radio' && (
                                        <FormItem item={item}>
                                            <FormRadio item={item}></FormRadio>
                                        </FormItem>
                                    )}
                                    {item.type === 'textarea' && (
                                        <FormItem item={item}>
                                            <TextArea
                                                maxLength={1000}
                                                placeholder={customFormat(
                                                    item.placeholder,
                                                    intl,
                                                )}
                                            />
                                        </FormItem>
                                    )}
                                    {item.type === 'images' && (
                                        <FormItem
                                            item={item}
                                            valuePropName="fileList"
                                            getValueFromEvent={normFile}
                                        >
                                            <FormImages item={item} />
                                        </FormItem>
                                    )}
                                    {item.type === 'files' && (
                                        <FormItem
                                            item={item}
                                            valuePropName="fileList"
                                            getValueFromEvent={normFile}
                                        >
                                            <FormFiles item={item} />
                                        </FormItem>
                                    )}
                                    {item.type === 'videos' && (
                                        <FormItem
                                            item={item}
                                            valuePropName="fileList"
                                            getValueFromEvent={normFile}
                                        >
                                            <FormVideos item={item} />
                                        </FormItem>
                                    )}
                                    {(item.type === 'city' ||
                                        item.type === 'port_city') && (
                                        <FormItem
                                            item={item}
                                            getValueFromEvent={normCity}
                                            getValueProps={normCityGetVal}
                                        >
                                            <FromCity
                                                placeholder={customFormat(
                                                    item.placeholder,
                                                    intl,
                                                )}
                                                item={item}
                                            ></FromCity>
                                        </FormItem>
                                    )}
                                    {item.type === 'manyInput' && (
                                        <Form.Item label={item.label}>
                                            <Space>
                                                {(item.key as []).map(
                                                    (inputItem, inputIndex) => (
                                                        <FormItem
                                                            colon={false}
                                                            noStyle
                                                            item={{
                                                                ...item,
                                                                key: inputItem,
                                                                placeholder:
                                                                    item
                                                                        .placeholder[
                                                                        inputIndex
                                                                    ],
                                                                label: '',
                                                            }}
                                                            key={inputIndex}
                                                        >
                                                            <InputNumber
                                                                style={{
                                                                    width: '100%',
                                                                }}
                                                                controls={false}
                                                                placeholder={customFormat(
                                                                    item
                                                                        .placeholder[
                                                                        inputIndex
                                                                    ],
                                                                    intl,
                                                                )}
                                                            />
                                                        </FormItem>
                                                    ),
                                                )}
                                            </Space>
                                        </Form.Item>
                                    )}
                                    {item.type === 'picker' && (
                                        <FormItem item={item}>
                                            <DatePicker
                                                style={{ width: '100%' }}
                                                placeholder={customFormat(
                                                    item.placeholder,
                                                    intl,
                                                )}
                                            />
                                        </FormItem>
                                    )}
                                    {item.type === 'select' && (
                                        <FormItem
                                            item={item}
                                            valuePropName="checked"
                                        >
                                            <FormSelect
                                                item={item}
                                                placeholder={customFormat(
                                                    item.placeholder,
                                                    intl,
                                                )}
                                            ></FormSelect>
                                        </FormItem>
                                    )}
                                    {item.type === 'rating' && (
                                        <FormItem item={item}>
                                            <Rate disabled />
                                        </FormItem>
                                    )}
                                </Col>
                            ),
                        )}
                    <Col span={24} style={{ textAlign: 'right' }}>
                        {props.children}
                    </Col>
                </Row>
            </Form>
        </>
    );
};
export default BuildForm;
